<template>
    <div class="tk_view_box">
        <template v-if="!dataForm.campaign.campaign_id">
            <div class="tk_view_top flexbox flexcenter" @click="is_show = !is_show">
                <i class="el-icon-caret-right"></i>
                <div class="tk_view_left">
                    <div class="tk_view_title">广告系列</div>
                    <div class="tk_view_num">广告系列数量 x {{getTableData.length}}</div>
                </div>
            </div>
            <div class="tk_view_content" v-if="is_show">
                <el-table :data="getTableData" max-height="340" class="view_table" ref="multipleTable">
                    <el-table-column prop="campaign_name" label="广告系列名称"></el-table-column>
                    <el-table-column prop="price" label="推广目标">
                        {{targer[dataForm.base[0].objective_type]}}
                    </el-table-column>
                    <el-table-column prop="budget_mode" label="预算类型">
                        <template slot-scope="scope">
                            {{budget_mode[scope.row.budget_mode]}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="budget" label="预算"></el-table-column>
                </el-table>
            </div>
        </template>
        <template v-else>
            <div class="tk_view_top flexbox flexcenter" @click="is_show = !is_show">
            <i class="el-icon-caret-right"></i>
            <div class="tk_view_left">
                <div class="tk_view_title">广告系列</div>
                <div class="tk_view_num">广告系列数量 x 1</div>
            </div>
        </div>
        <div class="tk_view_content" v-if="is_show">
            <el-table :data="tableData" max-height="340" class="view_table" ref="multipleTable">
                <el-table-column  label="广告系列名称">{{dataForm.campaign.campaign_name}}</el-table-column>
                <el-table-column prop="price" label="推广目标">
                        商品销量
                </el-table-column>
                <el-table-column prop="budget_mode" label="预算类型">
                    <template >
                        {{budget_mode[dataForm.campaign.budget_mode]}}
                    </template>
                </el-table-column>
                <el-table-column  label="预算">{{dataForm.campaign.budget}}</el-table-column>
            </el-table>
        </div>
        </template>
    </div>
</template>

<script>
export default {
    props: ["dataForm","subFrom"],
    components: {},
    name: "",
    data() {
        return {
            is_show:false,
            tableData:[{}],
            targer:{
                PRODUCT_SALES:"商品销量"
            },
            budget_mode:{
                BUDGET_MODE_DAY:"日预算",
                BUDGET_MODE_TOTAL:"总预算",
            }
        };
    },
    computed:{
        getMaxLength() {
            let list = this.dataForm.creatives_base.creatives_class;
            let num = 0;
            for (let i in list) {
                num += list[i].creatives.length;
            }
            return num;
        },
        getTableData(){
            let arr = []
            if(this.subFrom.crea_type==1){
                arr.push(this.dataForm.campaign)
            }else if(this.subFrom.crea_type==2){
                for(let i=0;i<this.getMaxLength;i++){
                    arr.push({
                        budget:this.dataForm.campaign.budget,
                        budget_mode:this.dataForm.campaign.budget_mode,
                        campaign_name:this.dataForm.campaign.campaign_name+'_'+(i+1),
                        campaign_product_source:this.dataForm.campaign.campaign_product_source,
                        operation_status:this.dataForm.campaign.operation_status,
                    })
                }
            }
            return arr
        }
    },
    created() {
        // this.tableData.push(this.dataForm.campaign)
    },
    methods: {},
};
</script>


<style scoped>
.tk_view_box{
    margin-bottom: 10px;
}
.tk_view_top {
    height: 65px;
    padding: 0 20px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: rgba(165, 177, 209, 0.1);
    cursor: pointer;
}
.tk_view_top .el-icon-caret-right {
    font-size: 18px;
    color: #616c85;
}
.tk_view_left {
    margin-left: 20px;
}
.tk_view_title {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
}
.tk_view_num {
    font-size: 12px;
    color: #b4b7bd;
    line-height: 17px;
    margin-top: 4px;
}
.tk_view_content {
    border: 1px solid #ebebeb;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top: 0;
    padding: 0 20px;
}
/deep/ .view_table.el-table th{
    background-color: #fff;
    font-weight: normal;
}
/deep/ .view_table.el-table th.is-leaf{
    border-bottom: 1px solid #f1f2f3 !important;
}
/deep/ .view_table.el-table::before{
    display: none;
}
</style>

